<template>
  <div>
    <!-- title="选择地点" -->
    <a-modal :visible="visible" :bodyStyle="{
      padding: '20px 60px',
    }" :width="800" :footer="null" @cancel="cancelClick" destroyOnClose>

      <template #title>
        <a-space>
          <span class="main-title">选择地点</span>
        </a-space>
      </template>


      <!-- <template v-if="spinning">
        <a-spin />
      </template>

      <template v-else>

      </template> -->
      <a-spin :spinning="spinning" tip="加载中...">
        <a-input v-model:value="searchName" placeholder="搜索地点" allowClear />
        <div v-if="poiList.length">
          <div style="margin: 10px 0">
            <a-checkbox v-model:checked="checkAll" :indeterminate="indeterminate" @change="onCheckAllChange">
              全选
            </a-checkbox>
          </div>
          <a-checkbox-group v-model:value="checkedList">
            <a-row class="pio_list" :gutter="[16, 16]" style="">
              <a-col :span="8" v-for="item in poiList" :key="item.id">
                <a-checkbox :value="item.id">
                  <span>{{ item.name }}</span>
                  <br>
                  <span style="font-size: 12px; color: #666;">{{ item.store_address }}</span>

                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </div>
        <div class="content" v-else>
          <div>
            <cu-icon class="icon" type="icon-sousuo" style="font-size: 30px" />
          </div>
          <div>请先尝试其他关键词</div>
        </div>
      </a-spin>

      <div class="footer">
        <a-space>
          <a-button @click="cancelClick" type="primary" class="cancel">取消</a-button>
          <a-button type="primary" class="confirm" @click="confirmClick">确定</a-button>
        </a-space>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import request from "../../../../common/utils/request";
import { useRouter } from "vue-router";
import utils from '@/common/utils/utils.js'
import { useDebounceFn } from "@vueuse/core";
export default defineComponent({
  name: "NewClip",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    poiId: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 当前的发布类型
    PlatFormValue: {
      type: String,
      default: 'xiaohongshu',
    },
    // 当前选择账号列表
    accountList: {
      type: Array,
      default: () => {
        return [];
      },
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      searchName: "",
      poiList: [],
      checkedList: [],
      indeterminate: false,
      checkAll: false,
      searchPoiList: [],
      // 获取位置加载中
      spinning:false
    });
    const router = useRouter();

    const getPoiList = async() => {
      if (!props.accountList?.length) return
      state.spinning = true
      let position
      try {
        position = await utils.getLocation()
      } catch (error) {
        // 启用默认经纬度
        position = {
          latitude: 31.8346339,
          longitude: 117.2054771,
        }
      }

      state.position = position

      console.log(position, '位置信息');
      getLocationFn(state.position)
    };

    const debouncedFn = useDebounceFn((position, keyword) => {
      getLocationFn(position, keyword);
    }, 500);
    // 获取小红书位置信息
    const getLocationFn = async (position, keyword = '') => {
      state.spinning = true
      const params = {
        keyword, // 关键词
        latitude: position.latitude, // 纬度
        longitude: position.longitude, // 经度
        page: 1,
        size: 9999,
        id: props.accountList[0]?.id, // 账号id
      }
      request
        .post("/work_ai", "/org/platform/account/poid", params)
        .then((res) => {
          if (res?.code && res.code != 1000) {
            return;
          }
          state.spinning = false

          res.result.poi_list.forEach(item => {
            item.store_address = item.full_address
            item.store_name = item.name
            item.id = item.poi_id
          })
          state.poiList = res.result.poi_list;
          state.searchPoiList = res.result.poi_list;
          console.log(res, '小红书poid列表');
        });
    }

    // 搜索新的地址
    watch(
      () => state.searchName,
      (val) => {
        if (props.PlatFormValue == 'xiaohongshu') {
          // 防抖
         val && debouncedFn(state.position, val)
        } else {
          if (val) {
            searchPoi(val);
          } else {
            state.poiList = state.searchPoiList;
          }
        }
      }
    );

    const searchPoi = (text) => {
      state.poiList = state.poiList.filter((item, index) =>
        item.name.includes(text)
      );
    };

    const onCheckAllChange = (e) => {
      if (e.target.checked) {
        state.checkedList = state.poiList.map((item) => item.id);
      }
      Object.assign(state, {
        checkedList: e.target.checked ? state.checkedList : [],
        indeterminate: false,
      });
    };

    watch(
      () => state.checkedList,
      (val) => {
        if (val.length) {
          state.indeterminate = true;
          if (val.length == state.poiList.length) {
            state.checkAll = true;
            state.indeterminate = false;
          }
        } else {
          state.indeterminate = false;
          state.checkAll = false;
        }
      }
    );

    const confirmClick = () => {
      let list = [];
      state.poiList.forEach((item) => {
        state.checkedList.forEach((checked) => {
          if (item.id == checked) {
            list.push(item);
          }
        });
      });
      emit("onConfirm", list);
    };

    

    const cancelClick = () => {
      emit("onCancel");
    };

    // 去POI列表
    const go_POI = () => {
      router.push({ name: "PoiList" });
    }

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getPoiList();

        }
      }
    );

    // 数据回显
    const dataRecovery = (list) => {
      // state.poiList = list
      state.checkedList = list.map(ele => ele.id)
    }
    

    return {
      ...toRefs(state),
      cancelClick,
      confirmClick,
      onCheckAllChange,
      dataRecovery,
      debouncedFn,
      go_POI,
      getLocationFn
    };
  },
});
</script>

<style lang="less" scoped>

.pio_list{
width: 100%;
  height: 500px;
  overflow-y: auto;


    &::-webkit-scrollbar {
      width: 5px;
      /* 滚动条的宽度 */
      height: 10px;
      /* 滚动条的高度，垂直滚动条可能用得上 */
    }
  
    &::-webkit-scrollbar-thumb {
      background: #bbbbbb;
      /* 滑块的背景颜色 */
      border-radius: 10px;
      /* 滑块的圆角 */
  
    }
  }


.content {
  text-align: center;
  padding: 20px;
  color: #c2c2c2;
}

.footer {
  text-align: right;
  padding-top: 10px;

  .cancel {
    border-radius: 5px;
    background: #fff;
    border: 1px solid #e0e0e6;
    color: #000;
  }

  .confirm {
    border-radius: 5px;
    background: #2878FF;
    border: none;
  }
}

:deep(.ss-checkbox-group) {
  width: 100%;
}

.create_POI:hover {
  cursor: pointer;
  color: #3261fb;
  /* 当鼠标悬停时，字体颜色变为蓝色 */
}

.main-title {
  margin-right: 20px;
}
</style>
